<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>测评小组端-专业技能测评</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="/stuInfoSystem/assets/images/favicon.ico">

    <!-- App css -->
    <link href="/stuInfoSystem/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/stuInfoSystem/css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="/stuInfoSystem/css/app.css" rel="stylesheet" type="text/css"/>

    <!-- App favicon -->
    <link rel="shortcut icon" href="/stuInfoSystem/assets/images/favicon.ico">

    <!-- Sweet Alert-->
    <link href="/stuInfoSystem/css/vendor/sweetalert2.min.css" rel="stylesheet" type="text/css"/>
    <!-- third party css -->
    <link href="/stuInfoSystem/css/vendor/dataTables.bootstrap4.css" rel="stylesheet" type="text/css">
    <!-- App css -->
    <!--    <link href="css/vendor/app.css" rel="stylesheet" type="text/css"/>-->
    <style>
        .btn-info-yf {
            color: #fdfefc;
            background-color: #2acb73;
            border-color: #2acb73;
        }
    </style>
</head>

<body>
<!-- Begin page -->
<div id="wrapper">


    <!-- ========== Left Sidebar Start ========== -->
    <div th:include="commons/surveySideBar :: sidebar"/>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
        <div class="content">

            <!-- TopBar Start -->
            <div th:replace="commons/surveyTopbar :: topbar "/>
            <!-- end TopBar -->

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active">突出表现测评</li>
                                    <li class="breadcrumb-item active">专业技能测评</li>

                                </ol>
                            </div>
                            <h4 class="page-title">专业技能审核:</h4>
                        </div>
                    </div>
                </div>

                <!--表格-->
                <table class="table table-hover">
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>学号</th>
                        <th>审核状态</th>
                        <th>操作栏</th>
                    <tr>
                    <tr th:each="pro,num : ${professionals}">
                        <td th:text="${num.count}">1</td>
                        <td th:text="${pro.stuName}" class="stuName">海绵宝宝</td>
                        <td th:text="${pro.stuId}" class="stuId">1840129269</td>
                        <td class="checkStatus" th:if="${pro.status == 0}" style="color:red;">未提交</td>
                        <td class="checkStatus" th:if="${pro.status == 1}" style="color:blue;">待审核</td>
                        <td class="checkStatus" th:if="${pro.status == 2}" style="color:green;">已通过</td>
                        <td class="checkStatus" th:if="${pro.status == 3}" style="color:black;">待修改</td>
                        <td>
                            <button type="button" class="btn btn-success btn-sm checkInfo"> 查看详情</button>
                            <button type="button" th:if="${pro.status != 2}" disabled class="btn btn-info btn-sm cancel">撤销审核</button>
                            <button type="button" th:if="${pro.status == 2}" class="btn btn-info btn-sm cancel">撤销审核</button>
                        </td>
                    </tr>

                </table>
                <!--分页条-->
                <div id="basic-datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate paging_simple_numbers" id="basic-datatable_paginate">
                                <ul class="pagination pagination-rounded">
                                    <li class="paginate_button page-item previous" id="basic-datatable_previous">
                                        <a href="#"
                                           th:href="@{'/toSurveyProfessionalAbility/'+${page - 1 < 1 ? 1 : page - 1}+'/10'}"
                                           aria-controls="basic-datatable" data-dt-idx="0" tabindex="0"
                                           class="page-link">
                                            <i class="mdi mdi-chevron-left"> </i>
                                        </a></li>
                                    <li class="paginate_button page-item"
                                        th:class="${i==page?'paginate_button page-item active':'paginate_button page-item'}"
                                        th:each="i : ${#numbers.sequence(1,totalPageNum)}"><a href="#"
                                                                                              th:href="@{'/toSurveyProfessionalAbility/'+${i}+'/10'}"
                                                                                              aria-controls="basic-datatable"
                                                                                              data-dt-idx="1"
                                                                                              tabindex="0"
                                                                                              class="page-link"
                                                                                              th:text="${i}"></a></li>
                                    <li class="paginate_button page-item next" id="basic-datatable_next"><a href="#"
                                                                                                            th:href="@{'/toSurveyProfessionalAbility/'+${page + 1 > totalPageNum ? totalPageNum : page + 1}+'/10'}"
                                                                                                            aria-controls="basic-datatable"
                                                                                                            data-dt-idx="7"
                                                                                                            tabindex="0"
                                                                                                            class="page-link"><i
                                            class="mdi mdi-chevron-right"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- end page title -->
            </div> <!-- container -->
        </div> <!-- content -->

        <!-- Footer Start -->
        <div th:replace="commons/footer :: foot"></div>
        <!-- end Footer -->

    </div>

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

</div>
<!-- END wrapper -->

<!-- App js -->
<script src="/stuInfoSystem/js/vendor.js"></script>
<script src="/stuInfoSystem/js/app.js"></script>

<!-- Plugins js -->
<script src="/stuInfoSystem/js/vendor/Chart.bundle.js"></script>
<script src="/stuInfoSystem/js/vendor/jquery.sparkline.min.js"></script>
<script src="/stuInfoSystem/js/vendor/jquery.knob.min.js"></script>
<script src="/stuInfoSystem/js/pages/dashboard.init.js"></script>

<!-- 表单js-->
<script src="/stuInfoSystem/js/vendor/jquery.dataTables.js"></script>
<script src="/stuInfoSystem/js/vendor/responsive.bootstrap4.min.js"></script>
<script src="/stuInfoSystem/js/vendor/buttons.print.min.js"></script>


<!--layer.js-->
<script src="/stuInfoSystem/js/layer/layer.js"></script>


<script>
    // 为查看详细信息添加点击事件
    $(".checkInfo").click(function () {

            // 获取当前点击的行对象
            var rowObj = $(this).parents('tr')
            var thisObj = $(this);

            // 找到当前审核状态
            var status = rowObj.children('.checkStatus').text();
            if ("未提交" == status){
                layer.msg('当前学生还未提交审核信息！',{icon:2});
                return;
            }

            // 获取当前行的学生id 和姓名
            var stuId = rowObj.children('.stuId').text();
            var stuName = rowObj.children('.stuName').text();

            // 发送ajax请求获取对应学生的行为数据
            $.post('/stuInfoSystem/findProfessionalInfoByStuId',{"stuId":stuId,"stuName":stuName},function (data) {

                // 页面层
                var htmlHead = "<div id='infoModel' class='layer-photos-demo' style='padding: 10px 15px  10px;'><h4 style='color: #0f0f0f;'>学生："+data.stuName+"</h4><h4 style='color: #0f0f0f;'>学号："+data.stuId+"</h4><table  style='color: #0f0f0f;' class=\"table table-hover\">" +
                    "<tr align='center' style='font-weight: bolder' class=\"info disabled\"><th>序号</th><th>加分项</th><th>分值</th><th>证明材料</th></tr>" ;
                var item = "";
                for (var i = 0; i < data.professionalItemVos.length; i++) {
                    item = item + "<tr align='center' class=\"info\"><td>"+(i+1)+"</td><td>"+data.professionalItemVos[i].itemName+"</td><td>"+data.professionalItemVos[i].itemScore+"</td><td><img width='200px'  height='150px' src='"+data.professionalItemVos[i].imgSrc+"' ></td></tr>"
                }
                var footer = "<tr align='center'>" +
                    "<td colspan='4'>" +
                    "<button type=\"button\" class=\"btn btn-success pass\">通过审核</button>&nbsp;&nbsp;&nbsp;&nbsp;" +
                    "<button type=\"button\" class=\"btn btn-danger reBack\">驳回修改</button>" +
                    "</td>" +
                    "</table>" +
                    "</div>";
                var all = htmlHead+item+footer;

                // 开启模态框
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['900px', '700px'], //宽高
                    content: all
                });

                layer.photos({
                    photos: '.layer-photos-demo'
                    ,anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });


                // 展示模态框时，通过当前状态判断可操作的按钮
                if("已通过" === status || "待修改" === status){
                    $(".pass").attr("disabled","disabled");
                    $(".reBack").attr("disabled","disabled");
                }

                // 为通过审核添加点击事件
                $(".pass").click(function () {
                    // 当前通过审核按钮
                    var passObj = $(this);
                    // 弹出提示框
                    layer.confirm('信息确认无误？', {
                        btn: ['确认通过', '取消'] //按钮
                    }, function () {
                        // 通过
                        // 获取当前条目的学生id
                        // 发送请求修改行为表记录状态
                        $.post('/stuInfoSystem/changeProfessionalStatus', {"stuId": stuId, "status": "2", "msg": ""}, function (data) {
                            if ("ok" === data) {
                                // 修改状态样式
                                rowObj.children('.checkStatus').removeAttr("style");
                                rowObj.children('.checkStatus').attr("style", "color:green;");
                                rowObj.children('.checkStatus').text("已通过");
                                // 唤醒撤销审核按钮
                                thisObj.next().removeAttr("disabled");
                                // 禁用通过审核及驳回审核
                                passObj.attr("disabled","disabled");
                                passObj.next().attr("disabled","disabled");

                                layer.msg('审核通过', {icon: 1});
                            } else {
                                layer.msg('服务器正忙！', {icon: 5});
                            }
                        }, 'text');
                    }, function () {
                        // 取消，无所事事
                    });
                });

                // 为驳回修改按钮添加业务逻辑
                $(".reBack").click(function () {
                    // 当前驳回修改按钮
                    var passObj = $(this);

                    // 弹出驳回原因输入框
                    layer.prompt({title: '请输入驳回原因', formType: 2}, function (text, index) {
                        layer.close(index);
                        // 确定后执行的代码
                        // 获取当前条目的学生id
                        $.post('/stuInfoSystem/changeProfessionalStatus', {
                            "stuId": stuId,
                            "status": "3",
                            "msg": text
                        }, function (data) {
                            if ("ok" === data) {
                                // 修改状态样式
                                rowObj.children('.checkStatus').removeAttr("style");
                                rowObj.children('.checkStatus').attr("style", "color:black;");
                                rowObj.children('.checkStatus').text("待修改");
                                // 禁用审核通过按钮和驳回按钮
                                passObj.attr("disabled", "disabled");
                                passObj.prev().attr("disabled", "disabled");
                                layer.msg('驳回信息已发送！', {icon: 1});
                            } else {
                                layer.msg('服务器正忙！', {icon: 5});
                            }
                        }, 'text');
                    });
                });
            },'json');
    });

</script>
</body>
</html>